前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版， 请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13221

效果图如下：

实现代码如下：

# cc-selectBox

#### 使用方法

```使用方法

```

#### HTML代码实现部分

```html

                    Hello, 尊敬的用户

                    登录注册解锁更多精彩内容

                    +86

                        {{ getcodemes }}

                登录

                    收不到验证码？试试

                    语音验证

                    +86

                登录

                    忘记密码？

                登录注册代表您已同意《

                App用户协议

                》

            确定

var app = getApp();

export default {

    components: {

    },

    data() {

        return {

            logs: [],

            nowindex: 0,

            regularLogin: false,

            select: ['验证码登录', '密码登录'],

            getcode: false,

            getcodemes: '获取验证码',

            sendcall: false,

            hidepass: false,

            callimg: false,

            phone: '',

            code: '',

            submit: {

                submit: false,

                text: '登录'

            },

            miniOpenId: '',

            redirect: '',

            showimgcode: false,

            imageCode: '',

            localcode: '',

            confirmactive: false,

            regmobile: '',

            regpassword: '',

            nowUrl: '/accountCenter/account/fast/login/verifyCode',

            frontPage: '',

            deviceIdCode: Math.random(),

            inputStyle: [

                {

                    iconactive: 'https://qiniu-image.qtshe.com/[email protected]',

                    icon: 'https://qiniu-image.qtshe.com/[email protected]',

                    selected: false

                },

                {

                    iconactive: 'https://qiniu-image.qtshe.com/[email protected]',

                    icon: 'https://qiniu-image.qtshe.com/[email protected]',

                    selected: false

                },

                {

                    iconactive: 'https://qiniu-image.qtshe.com/[email protected]',

                    icon: 'https://qiniu-image.qtshe.com/[email protected]',

                    selected: false

                }

            ],

            nowOnFocus: 0,

            isPassword: true

        };

    },

    onLoad: function (e) {

this.redirect = e.redirect || '';

    },

    methods: {

        getImgCode: function (e) {},

        closeImgCode: function () {

this.showimgcode = false;

        },

        voiceCode: function () {},

        changestyle: function (e) {},

        lossstyle: function (e) {},

        confirmCode: function () {},

        getshortmes: function () {},

        bid: function () {},

// 切换登录方式

        turntap: function (e) {

this.nowindex = e.target.dataset.num;

},

        pushcode: function (e) {},

        bindpancode: function (e) {},

        forgetpass: function () {},

        hideorshow: function () {},

        regloginaccount: function (e) {},

        regloginpass: function (e) {},

        changeImgCode: function () {},

        skipAgreePage: function () {},

        reglogin: function () {},

        inviteFriend: function () {},

        changePassType: function () {}

    }

};

@import "./login.scss";

```

#### 组件实现代码

```组件实现代码

{{ item }}

export default {

data() {

return {

};

},

props: {

selectArr: {

type: Array,

default: []

},

// 当前选中

nowindex: {

type: Number,

default: 0

},

},

methods: {

turntap(e) {

this.$emit("change", e);

},

}

};

@import "./index.scss";

```